<template>
  <div class="order">
    <div class="order-box">
      <el-form
        :model="from"
        :ref="from"
        :rules="rules"
        :label-position="labelPosition"
        class="demo-ruleForm"
      >
        <!-- 基本信息 -->
        <div class="userInfo" style="margin-top: 40px; ">
          <div class="back">
            <div style="margin: 18px 20px; font-weight: 700;">基本信息</div>
            <div>
              <el-button icon="el-icon-arrow-left" type="primary" @click="go"
                >返回</el-button
              >
            </div>
          </div>
          <el-divider></el-divider>
          <el-form-item
            label="用户昵称:"
            :prop="from.sysUser.nickName"
            style="margin-left: 20px;"
          >
            <el-input
              style="width: 340px; margin-left: 40px;"
              v-model="from.sysUser.nickName"
              autocomplete="off"
              @change="userInfoBtn(from.sysUser.nickName)"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item
            label="真实姓名:"
            :prop="from.sysUser.realName"
            style="margin-left: 20px;"
          >
            <el-input
              style="width: 340px; margin-left: 40px;"
              v-model="from.sysUser.realName"
              autocomplete="off"
              @change="nameChange(from.sysUser.realName)"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item
            label="身份证号:"
            :prop="from.sysUser.idCard"
            style="margin-left: 20px;"
          >
            <el-input
              style="width: 340px; margin-left: 40px;"
              v-model="from.sysUser.idCard"
              autocomplete="off"
              @change="peopleIDChange(from.sysUser.idCard)"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item
            label="手机号:"
            :prop="from.sysUser.phoneNumber"
            style="margin-left: 20px;"
          >
            <el-input
              style="width: 340px; margin-left: 54px;"
              v-model="from.sysUser.phoneNumber"
              autocomplete="off"
              @change="phoneNumberChange(from.sysUser.phoneNumber)"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item
            label="电子邮箱:"
            :prop="from.userExtra.email"
            style="margin-left: 20px;"
          >
            <el-input
              style="width: 340px; margin-left: 40px;"
              v-model="from.userExtra.email"
              autocomplete="off"
              @change="emailDataChange(from.userExtra.email)"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
          <div style="display: flex;">
            <el-form-item label="代理权限:" style="margin-left: 20px;">
              <el-select
                v-model="agency"
                placeholder="全部 "
                style="width: 340px;margin-left: 40px;"
                @change="agencyChange(agency)"
              >
                <el-option
                  v-for="item in attribute"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <div v-if="agency == 1 || agency == 2">
              <el-form-item label="代理时长:" style="margin-left: 20px;">
                <el-select
                  v-model="durations"
                  placeholder="全部 "
                  style="width: 340px;margin-left: 28px;"
                  @change="durationChange(durations)"
                >
                  <el-option
                    v-for="item in duration"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div v-if="agency == 1">
              <el-form-item
                label="代理上级:"
                prop="superior"
                style="margin-left: 20px;"
              >
                <el-input
                  style="width: 340px; margin-left: 42px;"
                  v-model="from.superior"
                  autocomplete="off"
                  @change="superiorChange(from.superior)"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
          <el-divider></el-divider>
          <div style="display: flex; align-items: center; margin-left: 20px;">
            <div style="color: #606266; font-size: 14px; font-weight: 700;">
              内部测试用户:
            </div>
            <div style="margin-left: 25px;">
              <el-radio v-model="from.userExtra.testFlag" :label="0"
                >否</el-radio
              >
              <el-radio v-model="from.userExtra.testFlag" :label="1"
                >是</el-radio
              >
            </div>
          </div>
          <el-divider></el-divider>
          <div style="margin: 18px 20px; font-weight: 700;">鱼米数量</div>
          <el-divider></el-divider>
          <el-form-item
            label="鱼米数量:"
            prop="Fish"
            style="margin-left: 20px;"
          >
            <el-input
              style="width: 340px; margin-left: 42px;"
              v-model.number="from.sysUser.fishIntegral"
              autocomplete="off"
              @change="FishChange(from.sysUser.fishIntegral)"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
        </div>

        <div style="width: 100%;margin: 50px 50%; ">
          <el-form-item>
            <el-button type="primary" @click="submitForm(from)">提交</el-button>
            <el-button @click="resetForm(from)">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addUser, editSysUserDetail, getAgentByUserId } from "@/api/user";
import { Toast } from "vant";
// 自定义校验方法  此处必须加callback形成闭环
const peopleID = (rule, value, callback) => {
  const rexg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (!value) {
    callback(new Error("名称不能为空"));
  } else if (!rexg.test(value)) {
    callback(new Error("身份证号格式错误"));
  } else {
    callback();
  }
};
const phoneNumber = (rule, value, callback) => {
  const rexg = /^1[3-9]\d{9}$/;
  if (!value) {
    callback(new Error("手机号不能为空"));
  } else if (!rexg.test(value)) {
    callback(new Error("手机号格式错误"));
  } else {
    callback();
  }
};
const emailData = (rule, value, callback) => {
  const rexg = /\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}/;
  if (!value) {
    callback(new Error("邮箱不能为空"));
  } else if (!rexg.test(value)) {
    callback(new Error("邮箱格式错误"));
  } else {
    callback();
  }
};

export default {
  data() {
    return {
      // 代理权限   	智能渔方代理级别：0.无 1.市级代理 2.省级代理
      attribute: [
        {
          name: "非代理",
          value: "0"
        },
        {
          name: "市级代理",
          value: "1"
        },
        {
          name: "省级代理",
          value: "2"
        }
      ],
      duration: [
        {
          name: "3年",
          value: "1"
        }
      ],
      labelPosition: "right",
      agency: "", //代理权限
      durations: "", //代理时长

      radio: "",
      //用户信息
      from: {
        ID: "1111",
        name: "",
        peopleID: "",
        phoneNumber: "",
        emailData: "",
        superior: "",
        Fish: "",
        radio: ""
      },
      rules: {
        peopleID: [{ validator: peopleID, trigger: "blur" }],
        phoneNumber: [{ validator: phoneNumber, trigger: "blur" }],
        emailData: [{ validator: emailData, trigger: "blur" }]
      },
      userInfo: {},
      nick: "", //用户昵称
      realName: "", //真实姓名
      idCardNo: "", //身份号码.
      phoneNumber: "", //手机号
      fishPartyAgentDeadline: "1", //智能渔方代理期限：1.三年
      fishPartyAgentLevel: "", //智能渔方代理级别：0.无 1.市级代理 2.省级代理
      fishPartyAgentSuperiorId: "", //智能渔方上级代理ID
      fishIntegral: "", //鱼米
      email: "",
      userId: ""
    };
  },
  created() {
    this.userId = this.$route.query.userId;
    // 给默认选项
    this.editSysUserDetail();
    this.durations = this.duration[0].value;
  },
  methods: {
    // 返回
    go(){
        this.$router.go(-1)
    },
    // 用户详细
    async editSysUserDetail() {
      let data = {
        userId: this.userId
      };
      let result = await editSysUserDetail(data);

      if (result.code == 0) {
        this.from = result.data;
        if (result.data.fishPartyAgentLevel == 0) {
          this.agency = this.attribute[0].value;
        } else if (result.data.fishPartyAgentLevel == 1) {
          this.agency = this.attribute[1].value;
        } else {
          this.agency = this.attribute[2].value;
        }
      }
    },
    // 提交
    submitForm(from) {
      this.$refs[from].validate(async valid => {
        if (valid) {
          if (this.fishPartyAgentSuperiorId) {
            let data = {
              userId: this.fishPartyAgentSuperiorId
            };
            let agentInfo = await getAgentByUserId(data);
            if (agentInfo.code != 0) {
              Toast.fail("保存失败");
              return;
            }
            if (agentInfo.data == null) {
              Toast.fail("代理上级不存在！");
              return;
            } else if (agentInfo.data.agentLevel != 2) {
              this.fishPartyAgentSuperiorId = "";
              Toast.fail("代理上级必须为省级代理！");
              return;
            }
          }
          let data = {
            nickName: this.from.sysUser.nickName,
            realName: this.from.sysUser.realName,
            idCardNo: this.from.sysUser.idCard,
            phoneNumber: this.from.sysUser.phoneNumber,
            fishPartyAgentDeadline: this.fishPartyAgentDeadline,
            fishPartyAgentLevel: this.fishPartyAgentLevel,
            fishPartyAgentSuperiorId: this.fishPartyAgentSuperiorId,
            fishIntegral: this.from.sysUser.fishIntegral,
            email: this.from.userExtra.email,
            userId: this.from.userExtra.userId,
            testFlag: from.userExtra.testFlag
          };
          let result = await addUser(data);
          if (result.code == 0) {
            Toast.success("修改成功返回上一页");
            setTimeout(() => {
              this.$router.go(-1);
            }, 2000);
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 用户昵称
    userInfoBtn(e) {
      this.nick = e;
    },
    // 真实姓名
    nameChange(e) {
      this.realName = e;
    },
    // 身份证号
    peopleIDChange(e) {
      this.idCardNo = e;
    },
    // 手机号码
    phoneNumberChange(e) {
      this.phoneNumber = e;
    },
    // 电子邮箱
    emailDataChange(e) {
      this.email = e;
    },
    //代理权限
    agencyChange(e) {
      if (e == 2) {
        this.fishPartyAgentSuperiorId = "";
      }
      this.fishPartyAgentLevel = e;
    },
    // 智能渔方代理期限
    durationChange(e) {
      if (this.agency !== 0) {
        this.fishPartyAgentDeadline = e;
      }
    },
    // 代理上级
    superiorChange(e) {
      this.fishPartyAgentSuperiorId = e;
    },
    FishChange(e) {
      this.fishIntegral = e;
    }
  }
};
</script>

<style lang="scss" scoped>
.back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px;
}
.label {
  .buy_num {
    display: inline;
    margin-right: 5.86rem;
  }

  .btn_minute {
    border-radius: 0.133rem 0 0 0.133rem;
    padding: 0.146rem 0.2rem 0.146rem 0.226rem;
  }

  input {
    font-size: 12px;
    padding: 0.146rem 0.12rem;
    background: #f5f5f5;
    text-align: center;
  }

  .btn_add {
    border-radius: 0 0.133rem 0.133rem 0;
    padding: 0.146rem 0.226rem 0.146rem 0.2rem;
  }
}

.weight {
  margin-right: 50px;
  width: 50px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: #ccc;
  text-align: center;
  line-height: 30px;
}

::v-deep .el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 43px;
}

[data-v-2a76a2eb].el-form-item {
  margin-bottom: 22px;
  margin-left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
}

::v-deep.el-form-item {
  margin-bottom: 22px;
  display: flex;
  align-content: center;
}

::v-deep .el-form-item__label {
  // text-align: right;
  vertical-align: middle;
  float: none;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.order {
  width: 100%;
  height: 100%;

  .order-box {
    border: 1px solid #ccc;
    width: 98%;
    margin: 0 auto;

    .userInfo {
      border: 1px solid #ccc;
      width: 98%;
      margin: 0 auto;
    }
  }

  .userInfos {
    border: 1px solid #ccc;
    width: 500px;
    margin-left: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
